<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<title>js 训练</title>
	<style>
		.btn-info{color: #8cd5ed;line-height: 30px;text-decoration: underline;border-bottom: #8cd5ed solid 10px;}
	</style>
</head>
<body style="background-color: #eee;" class="container" ><!-- onclick="myclick()" 点击事件，返回文档中当前获取简单的元素 -->
<h1 class="text-center">这是我的JavaScript的训练页面</h1>
<hr>
	<p id="indexof"></p>
	<button onclick="indexofs()">点我</button>
	<div id="blower"></div>
	<div id="screen"></div>
	<div style="bottom-top:1px solid #ccd;">
		<p>点击查看输入框的内容</p>
		<input type="button" value="点我" onclick="mynameshow()">
		<p id="nameshow"></p>
	</div>
	<button onclick="morewindows()" style="background-color: #CCFFFF;border:1px solid #CCFFFF;">打开窗口</button>
	<button onclick="closemywindow()">关闭新窗口</button>
	<button onclick="checkwindows()">窗口是否关闭</button>
	<p id="windmsg"></p>
	<button onclick="openurl()">载入新文档</button>
	<button onclick="openhtml()">重新加载页面</button>
	<button onclick="opennew()">载入新文档替换当前页面</button>
	<button onclick="openkk()">跳出框架</button>

	<p id="label">获取body的内的标签</p>
	<button onclick="onbodylabel()">获取body标签</button>
	<div class="container">
		<ul id="list1">
			<li>黄豆</li>
			<li>菜芽</li>
			<li>毛豆</li>
		</ul>
		<ul id="list2">
			<li>刀豆</li>
		</ul>
		<button onclick="clonenode()">复制标签</button>
	</div>
	<div class="container">
		<br>
		<input type="text" id="focus" value="hello word!">
		<button onclick="myfocus()">获取焦点</button>
		<button onclick="myblur()">失去焦点</button>
	</div>

	<script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
	<script>
	//namespaceURI 获得文档的名称空间的URI
	console.log("当前文档的名称空间URL："+document.documentElement.namespaceURI);

	//activeElement 属性返回文档中当前获得焦点的元素
	function myclick() {
		document.write("点击的标签名："+document.activeElement.tagName+"<br>");
	}

	//获取输入框的内容
	function mynameshow(){
		var x;
		var person = prompt("请输入你的名字","huang huang");
		if (person!=null||person!="") {
			x="hello "+person+",welcome to my house!";
			document.getElementById("nameshow").innerHTML=x.bold();
		}
	}

	//打开新窗口
	var mywindow;
	function morewindows(){
		// window.open("http:w3school.com.cn");
		// toolbar 工具栏、
		// mywindow = window.open("http:w3school.com.cn","_blank","toolbar=yes,loction=yes,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=400,height=500");
        //打开多个窗口
		// mywindow = window.open("http://www.microsoft.com/");
	    //window.open("http://www.w3schools.com/");
	    // mywindow.focus();//窗口获取焦点，toolbar=no
	    mywindow=window.open("","","width=200,heigth=300");
	    // mywindow.document.write(alert("<p>窗口名称是："+mywindow.name+"</p>"));
	    mywindow.document.write("<p>这是我的窗口</p>");
	    // mywindow.opener.document.write("<p>这个是原窗口</p>");
	    // // mywindow.focus();//focus：窗口获取焦点，moveBy(250,250)：相对于当前位置移动窗口，moveTo(0,0)：移动到指定位置，window.print();打印当前页面 ，resizeTo(500,500):调整窗口大小
	    // window.scrollBy(100,100)指定滚动像素
	    // window.scrollTo(100,500)滚动到指定位置
	}

	//关闭新窗口
	function closemywindow(){
		if(mywindow){
			mywindow.close();
	    }
	}

	//检查是否关闭了新窗口
	function checkwindows(){
		if (!mywindow) {
           document.getElementById("windmsg").innderHTML="我的窗口没有打开！";
		}else{
			if (mywindow.closed) {
				document.getElementById("windmsg").innerHTML="你的窗口已经关闭！";
			}else{
				document.getElementById("windmsg").innerHTML="窗口未关闭！";
			}
		}
	}

	//history
    //历史列表URL的数量、window.history.back()、window.history.forward()前进、window.history.go(1)
    document.write("<br>历史列表中的历史url的数量："+history.length+"<br>");

    //location
    //返回主机名和当前url的端口号
    document.write("<br>当前URL端口号："+location.host+"<br>");
    //当前整个URL
    document.write("<br>当前URL："+location.href+"<br>");
    //返回当前url的路径名
    document.write("<br>当前URL的路径名："+location.pathname+"<br>");
    //当前路径的协议名
    document.write("<br>当前路径的协议名："+location.protocol+"<br>");
    //载入新文档
    function openurl(){
    	window.location.assign("http://www.baidu.com");
    }
    //重新载入当前页面
    function openhtml(){
    	location.reload();
    }
    //载入新文档替换当前页面
    function opennew(){
    	window.location.replace("http://www.jquery123.com");
    }
    //跳出框架
    function openkk(){
    	window.top.location="angularjs.html";
    }

    // querySelector() 方法获取文档中 id="demo" 的第一个元素
    document.querySelector("#indexof").innerHTML="你好码农！"
    console.log(document.querySelector("#indexof").innerHTML);

    //readyState  文档加载状态
    console.log("当前文档加载状态："+document.readyState);

    // referrer 属性返回载入当前文档的来源文档的URL。
	// 如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部
	console.log("返回载入当前文档的来源文档的URL："+document.referrer);

	//title 属性可返回当前文档的标题
	console.log("文档标题："+document.title);

    //childNodes 获取 body 元素的子节点集合
    function onbodylabel(){
    	var t ="";
    	var c = document.body.childNodes;
    	// for (var i = c.length -1; i = 0; i--) {
    	// 	t = t + c[i].nodeName+" /// ";
    	// }
    	 // console.log(c);
    	 //classList 为元素添加 class
    	 document.getElementById("label").classList.add("text-info","text-left");
    	 // document.getElementById("label").classList.toggle("btn-center");
    	 c = "<br>"+c + " // 样式集合：" + document.getElementById("label").classList;
    	 console.log("样式集合：" + document.getElementById("label").classList);
    	 console.log("样式集合：" + document.getElementById("label").className);
    	 console.log("p标签的可视宽度："+document.getElementById("label").clientWidth);
    	 document.getElementById("label").innerHTML= c;
    	 document.getElementById("label").contentEditable = true;//设置 <p> 元素内容为可编辑
    	 console.log("id为label的p标签的样式："+document.getElementById("label").getAttributeNode("class").value);
    }

    //cloneNode 拷贝一个列表项到另外一个列表
    function clonenode(){
       var item = document.getElementById("list1").lastChild;
       var cln=item.cloneNode(true);
       document.getElementById("list2").appendChild(cln);
       console.log("列表1是否有子元素："+document.getElementById("list1").hasChildNodes());
    }

    //focus 获取焦点
    function myfocus(){
    	document.getElementById("focus").focus();
    }

    //blur 失去焦点
    function myblur(){
    	document.getElementById("focus").blur();
    }

	var text="Hello Word!!";
	var arrays = ["263","joded","蚕豆","zhangsan","lisi","1"];
		document.write("<p>字体变大："+text.big()+"</p>");
		document.write("<p>字体缩小："+text.small()+"</p>");
		document.write("<p>字体变粗："+text.bold()+"</p>");
		document.write("<p>斜体："+text.italics()+"</p>");
		document.write("<p>固定位置："+text.fixed()+"</p>");
		document.write("<p>加删除线："+text.strike()+"</p>");
		document.write("<p>字体颜色："+ text.fontcolor("#ccc") +"</p>");
		document.write("<p>字体大小："+text.fontsize(5)+"</p>");
		document.write("<p>下标："+text.sub()+"</p>");
		document.write("<p>上标："+text.sup()+"</p>");
		document.write("<p>链接："+text.link("http://www.baidu.com")+"</p>");

		//indexof //attributes
		function indexofs() {
			var n = text.indexOf("Word");

			//n = n + document.write(text.replace("Word","我的哥"));
			document.getElementById("indexof").innerHTML=n;//+"-这标签的属性："+m;
		}

		//match 区分大小写
		document.write(text.match("Word")+"<br>");

		//constructor 属性返回对 String 对象属性创建的函数。
		document.write("<br>返回对string 对象属性创建的函数："+text.constructor+"<br>");

		//prototype 给对象添加属性
		function employee(name,jobtitle,born){
			this.name=name;
			this.jobtitle=jobtitle;
			this.born=born;
		}
		var fred = new  employee("Dove","IT CCO","1992");
		employee.prototype.ages=null;
		fred.ages=26;
		document.write("<br>"+fred.ages+"<br>");

		//charat 返回指定位置的字符
		document.write("<br>charAt:"+text.charAt(6)+"<br>");

		//charCodeAt 返回字符串第一个字符的 Unicode 编码
		document.write("<br>charCodeAt:"+text.charCodeAt(0)+"<br>");

		//concat 连接两个或两个以上的字符串

		//fromCharCode() 将 Unicode 编码转为一个字符
		document.write("<br> 42 : "+String.fromCharCode(42,36,69,72,96,58,85,45,66)+"<br>");

		//match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
		var str="The rain in SPAIN stays mainly in the plain";
		document.write("<br>match 方法: "+str.match(/ain/g)+"<br>");

		//slice 提取字符串的片断text.slice(3)或者text.slice(1,4)
		document.write("<br>slice : " + text.slice(1,4)+"<br>");

		//split() 方法把一个字符串分割成字符串数组
		document.write("<br>split : "+text.split("")+"<br>");

		//join 将数组作为字符串输出
		document.write("<br> join : "+arrays.join()+"<br>");

		//pop 删除数组的最后一个元素
		arrays.pop()
		document.write("<br> pop :"+ arrays +"<br>");

		//push 给数组添加新的元素
		arrays.push("wang'er");
		document.write("<br> push :"+arrays +"<br>");

		//reverse 将数组反转排序
		document.write("<br> reverse :" + arrays.reverse() + "<br>");

		//shift 删除数组的第一个元素
		arrays.shift();
		document.write("<br> shift :"+arrays + "<br>");

		//unshift 在数组中插入元素
		arrays.unshift("limie","uiken");
		document.write("<br> unshift ："+arrays+"<br>");

		//slice 截取数组下标 1 到 2 的元素
		document.write("<br> 可用于数组也可以用于字符串 slice :"+arrays.slice(1,3)+"<br>");

		var abcd= ["boeu","eieow","weiwo","touc","mone"];
		//sort() 升序排列数组(单词)
		document.write("<br> sort 升序排列数组 : "+ abcd.sort()+"<br>");

		var sort123 = [12,36,985,5,1,0,89,455];
		//sort() 升序排列数组(数字)
		document.write("<br> sort : " + sort123.sort(function(a,b){return a-b})+"<br>");

		//sort() 降序
		document.write("<br> sort : " + sort123.sort(function(a,b){return b-a})+"<br>");

		//splice 向数组添加元素
		document.write("<br> splice : " + abcd.splice(2,0,"llcoo","ioeol")+"<br>");

		//toString 将数组转为字符串并返回
		document.write("<br> toString :" + abcd.toString() +"<br>");

		//round 四舍五入
		document.write("<br> round : " +Math.round(2.5)+"<br>");

		//random 0 到 1 的一个随机数
		document.write("<br> random : " + Math.random() +"<br>");

		//max 最大值
		document.write("<br> Math.max(5,6) : " + Math.max(5,6) +"<br>");

		//摄氏度与华氏转换

		//

		//浏览器信息
		var txt = "<hr><p>浏览器代号："+navigator.appCodeName+"</p>";
		txt +="<p>浏览器名称："+navigator.appName+"</p>";
		txt +="<p>浏览器版本："+navigator.appVersion+"</p>";
		txt +="<p>启用Cookie："+navigator.cookieEnabled+"</p>";
		txt +="<p>硬件平台："+navigator.platform+"</p>";
		txt +="<p>用户代理："+navigator.userAgent+"</p>";
		txt +="<p>用户代理语言："+navigator.systemLanguage+"</p><hr>";
		document.getElementById("blower").innerHTML=txt;

		//屏幕信息
		var screens ="你的屏幕<hr><p>总宽度/高度："+screen.width+"*"+screen.height +"</p>";
		screens +="<p>可用宽度/高度："+screen.availWidth+"*"+screen.availHeight+"</p>";
		screens +="<p>颜色深度："+screen.colorDepth+"</p>";
		screens +="<p>颜色分辨率："+screen.pixelDepth+"</p><hr>";
		document.getElementById("screen").innerHTML=screens;
	</script>
</body>
</html>